/*
 * 特价商品部分商品组件
 * @Author: ljb
 * @Date: 2018-11-13 16:32:49
 * @Last Modified by: ljb
 * @Last Modified time: 2019-10-12 16:43:23
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	.v-component-special-product {
		.product-container {
			display: table;
			width: 100%;
			box-sizing: border-box;
			.product-image {
				display: table-cell;
				width: 184*@rem-per-px;
				height: 184*@rem-per-px;
				line-height: 184*@rem-per-px;
				overflow: hidden;
				font-size: 0;
				background-color: @background-color;
				img {
					width: 100%;
					vertical-align: middle;
				}
			}
			.product-attr {
				display: table-cell;
				position: relative;
				padding-left: 24*@rem-per-px;
				.product-title {
					position: absolute;
					left: 24*@rem-per-px;
					top: 0;
					max-height: 80*@rem-per-px;
					line-height: 40*@rem-per-px;
					font-size: 28*@rem-per-px;
					color: rgba(0,0,0,.85);
				}
				.price-area {
					position: absolute;
					left: 24*@rem-per-px;
					bottom: 0;
					width: 100%;
					line-height: 44*@rem-per-px;
					font-size: 32*@rem-per-px;
					.price {
						font-weight: bold;
					}
					.line-price {
						font-size: 16*@rem-per-px;
						text-decoration: line-through;
						color: rgba(214,214,214,1);
					}
					// .unit {
					// 	font-size: 24*@rem-per-px;
					// 	color: @unit-color;
					// }
				}
			}
		}
	}

</style>
<template>
	<div class="v-component-special-product">
		<div class="product-container">
			<div class="product-image">
				<img
					v-lazy="productImage"
					alt="">
			</div>
			<div class="product-attr">
				<div
					:title="productTitle"
					class="product-title multi-line-overflow">{{ productTitle }}</div>
				<div class="price-area">
					<span class="price">
						<span
							v-if="leftSymbol"
							class="unit">{{ leftSymbol }}</span>
						{{ productPrice }}
						<span
							v-if="rightSymbol"
							class="unit">{{ rightSymbol }}</span>
					</span>
					<span
						v-if="linePrice"
						class="line-price">{{ leftSymbol + linePrice + rightSymbol }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

/**
 * 特价商品部分商品组件
 * @vue-prop {string} [productImage=null] 封面图片
 * @vue-prop {String} [productTitle='']	商品标题
 * @vue-prop {String | Number} [productPrice=''] 商品价格
 * @vue-prop {String | Number} linePrice 划线价
 * @vue-prop {string} [leftSymbol=''] 货币符号
 * @vue-prop {string} [rightSymbol='] 货币符号
 */
export default {
	name: 'SpecialProduct',
	props: {
		productImage: {
			type: String,
			default() {
				return null;
			},
		},
		productTitle: {
			type: String,
			default() {
				return '';
			},
		},
		productPrice: {
			type: [String, Number],
			default() {
				return 300;
			},
		},
		linePrice: {
			type: [String, Number],
			required: true,
		},
		leftSymbol: {
			type: String,
			default() {
				return '';
			},
		},
		rightSymbol: {
			type: String,
			default() {
				return '';
			},
		},
	},
	data() {
		return {
		};
	},
	methods: {

	},
};
</script>
